<template>
  <div class="kystop-bar">
    <div class="kysheader-box">
      <div class="kystop-reg-log l">
                <span class="kysgo-log">
                    <nuxt-link to="/" class="userloginbtn">
                        欢迎回来，{{ user.userName }}</nuxt-link>
                    <a @click="doLogout" class="layui-btn layui-btn-primary layui-btn-xs"
                       style="color: #999;">退出</a>
                </span>
      </div>
      <div class="kystop-r-menu">
        <ul class="kysfix">
          <li class="kyskyst-item"><nuxt-link to="/account">我的账户</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/wallet">我的余额</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/message/list">站内信</nuxt-link></li>
          <li class="kyskyst-item"><nuxt-link to="/safe">安全设置</nuxt-link></li>
<!--          <li class="kyst-item"><a href="http://oe.11kys.cn/ucenter/recharge.html"-->
<!--                                   class="topchongzhi layui-btn">站内信</a></li>-->
<!--          <li class="kyskyst-item">-->
<!--            <a onclick="return confirm(&#39;有事请直奔主题,不要问在不在&#39;)"-->
<!--               href="tencent://message/?Menu=yes&amp;uin=838600077&amp;Site=kayisu&amp;Service=300&amp;sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1714f9d45"-->
<!--               class="topkf" target="_blank" style="border-left: 1px solid #999;">联系客服</a>-->
<!--          </li>-->
<!--          <li class="kyst-item" style="padding: 0 1px;"><a href="http://oe.11kys.cn/ucenter/" class="topkf"-->
<!--                                                           style="padding: 0 1px;">个人中心</a></li>-->
        </ul>
      </div>
    </div>
  </div>
  <!-- <ul class="bw">
    <li class="welcome">
      <span>欢迎您，{{ user.userName }}</span>
      <el-button @click="doLogout">[退出]</el-button>
    </li>
    <li>
      <a href="/account">我的账户</a>
    </li>
    <li>
      <a href="/wallet">我的余额</a>
    </li>
    <li>
      <a href="/message/list">站内信</a>
    </li>
    <li>
      <a href="/safe">安全设置</a>
    </li> -->
    <!-- <li v-if="!supply">
      <a href="/" target="_blank">API下载</a>
    </li> -->
    <!-- <li v-if="!isSupply">
      <a href="/supply">供货系统</a>
    </li>
    <li v-else>
      <a href="/main">零售系统</a>
    </li> -->
  <!-- </ul> -->
</template>

<script>
import { mapState } from 'vuex'
import user from '@/common/user'

export default {
  props: {
    supply: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
      isSupply: (state) => false
    })
  },
  methods: {
    doLogout() {
      user.removeToken(this.$cookies)
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.kystop-bar {
    position: relative;
    z-index: 3;
    height: 36px;
    background: #ffffff;
    color: #a1a1a1;
    min-width: 1200px;
}
.kysheader-box {
    width: 1200px;
    margin: 0 auto;
}
.kystop-reg-log.l {
    float: left;
    position: relative;
    left: 5px;
}
span.kysgo-log {
    position: relative;
    z-index: 3;
    height: 36px;
    line-height: 32px;
    color: #a1a1a1;
    min-width: 1200px;
}
.kystop-r-menu {
    text-align: right;
}
ul.kysfix {
    list-style: none;
    float: right;
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
li.kyskyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    text-align: left;
    line-height: 30px;
}
.topchongzhi {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 4px;
    vertical-align: 0;
}
li.kyst-item {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 0 8px;
    text-align: left;
    line-height: 30px;
}
.kysquick-log a {
	display: inline-block;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #0089ed;
    border-radius: 2px;
    vertical-align: 0;
}
.kyskyst-item a {
	font-size: 12px;
    padding: 0 8px;
    border-right: 1px solid #999;
}
.topkf {
	font-size: 12px;
    padding: 0 15px;
}

</style>

<style lang="scss" scoped>
.kystop-bar {
  min-width: unset !important;
  width: 1172px;
  margin: auto;
  .kysheader-box {
    width: 100% !important;
  }
}
ul {
  text-align: right;
  font-size: 0;
  &.bw {
    padding: 5px 20px;
  }
  .welcome {
    .el-button {
      padding: 0;
      border: none;
      font-size: 12px;
      margin-left: 15px;
      background: transparent;
    }
  }
  li {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    padding-left: 15px;
    &::after {
      content: '';
      display: inline-block;
      height: 12px;
      border-right: 1px solid $--gray-text-color;
      padding-left: 15px;
      margin-top: 1px;
      vertical-align: text-top;
    }
    a {
      cursor: pointer;
      text-decoration: none;
    }
    a:not(:hover) {
      color: $--gray-text-color;
    }
    &:last-child::after {
      content: none;
    }
  }
}
</style>
